<template>
    <div class="azm-no-data-components flex align-center justify-center" v-if="type > 0">
        <button class="cu-btn azm-login-btn round" v-if="type === 1" @tap.stop="handleToLogin">
            <text>请先登录</text>
        </button>
        <view v-else-if="type === 2" @tap.stop="handleCreateCompany">
            <view class="flex flex-sub text-blue align-center justify-center azm-create-company">
                <text class="tlIcon-create_card azm-icon"></text>
                <text>创建公司</text>
            </view>
            <view class="azm-create-desc">你离数据只差一个公司，快去创建公司吧～</view>
        </view>
        <button v-else-if="type === 3" hover-class="none" class="block cu-btn azm-create-card"
                @tap.stop="handleCreateCardPersonal()">
            <view>
                <view class="flex flex-sub text-blue align-center justify-center azm-create-company">
                    <text class="tlIcon-create_card azm-icon"></text>
                    <text>创建名片</text>
                </view>
                <view class="azm-create-desc">你离数据只差一张名片，快去创建名片吧～</view>
            </view>
        </button>
    </div>
</template>

<script>
    import { mapState } from 'vuex'

    export default {
        name: "tl-no-data",
        components: {},
        props: {
            type: Number,// 1：登录 2：公司 3：名片
        },
        data () {
            return {
                message: ''
            }
        },
        computed: {
            ...mapState({})
        },
        created () {
        },
        methods: {
            handleToLogin () {
                this.$util.Login.toLogin()
            },
            handleCreateCompany () {
                this.handleToLoginLink({
                    path: "pages/settled/index"
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .azm-no-data-components {
        height: 100%;
        width: 100%;

        .azm-login-btn {
            width: 184*2upx;
            height: 47*2upx;
            background: rgba(0, 117, 255, 0.08);
            color: $tl-color-primary;
            font-size: 16*2upx;
            font-weight: bold;
        }

        .azm-create-company {
            line-height: 23*2upx;
            font-size: 16*2upx;

            .azm-icon {
                font-size: 17*2upx;
                margin-right: 4*2upx;
            }
        }

        .azm-create-desc {
            margin-top: 9*2upx;
            height: 19*2upx;
            font-size: 13*2upx;
            font-weight: 400;
            color: #ABAEAE;
            line-height: 19*2upx;
        }

        .azm-create-card {
            background: transparent;
            height: auto;
        }
    }
</style>
